<script>
import HelloWorld from './components/HelloWorld.vue'
import BpmnModeler from 'bpmn-js/lib/Modeler'
import customTranslate from './customTranslate'

import {
  BpmnPropertiesPanelModule,
  BpmnPropertiesProviderModule,
  ZeebePropertiesProviderModule,
  CamundaPlatformPropertiesProviderModule
} from 'bpmn-js-properties-panel'
import Axios from 'axios'
import ZeebeBpmnModdle from 'zeebe-bpmn-moddle/resources/zeebe.json'
import CamundaBpmnModdle from 'camunda-bpmn-moddle/resources/camunda.json'

export default {
  components: {
    HelloWorld
  },
  mounted() {
    this.showBpmnEditor()
  },
  methods: {
    path() {
      this.parent?.path?.concat(' > ', this.name) || this.name;
    },
    showBpmnEditor() {
// 获取画布 element
//       const canvas = this.$refs.canvas;


      var customTranslateModule = {
        translate: ['value',customTranslate]
      };

      this.bpmnModeler = new BpmnModeler({
        /*
          声明 bpmn 编辑器所绑定到的 div 容器
          方式一：
          container: canvas,//'#bpmnEditorContainer',
          keyboard: {
            bindTo: window
          },*/
        additionalModules: [
          BpmnPropertiesPanelModule,
          BpmnPropertiesProviderModule,
          /**
           * 注意：ZeebePropertiesProviderModule 和 CamundaPlatformPropertiesProviderModule 插件
           * 只能二选一
           * yarn add zeebe-bpmn-moddle
           *  添加 模型扩展插件
           ZeebePropertiesProviderModule,
           */
          /*参考：https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel
           *yarn add camunda-bpmn-moddle
           **/
          CamundaPlatformPropertiesProviderModule,
          /**
           * 自定义翻译模块
           * 参考：https://github.com/bpmn-io/bpmn-js-examples/tree/master/i18n
           * */
          customTranslateModule
        ],
        propertiesPanel: {
          // 指定属性面板所绑定到的 dom 元素id
          // 注意：此元素必须存在，否则没有 属性面板
          parent: '#js-properties-panel'
        },

        moddleExtensions: {
          // zeebe: ZeebeBpmnModdle,
          camunda: CamundaBpmnModdle
        }

      });

// attach it to some element
      const diagramUrl = 'http://localhost:50000/export (1).bpmn';//https://cdn.staticaly.com/gh/bpmn-io/bpmn-js-examples/dfceecba/starter/diagram.bpmn';


      Axios.get(diagramUrl).then(resp => {
        /*
        * 声明 bpmn 编辑器所绑定到的 div 容器
        * 方式二
        * */
        this.bpmnModeler.attachTo('#bpmnEditorContainer');
        this.bpmnModeler.keyboardBindings = window

        return this.bpmnModeler.importXML(resp.data);
      }).then(({warnings}) => {
        // access modeler components

        var canvas = this.bpmnModeler.get('canvas');
        var overlays = this.bpmnModeler.get('overlays');


        // zoom to fit full viewport
        canvas.zoom('fit-viewport');


        // attach an overlay to a node
        /*overlays.add('SCAN_OK', 'note', {
          position: {
            bottom: 0,
            right: 0
          },
          html: '<div class="diagram-note">Mixed up the labels?</div>'
        });*/

        // add marker
        // canvas.addMarker('SCAN_OK', 'needs-discussion');
      })
// detach the panel
//       this.viewer.detach();


    },
  }
}
</script>

<template>
  <div id="root">
    <!--    -->
    <div id="bpmnEditorContainer">

    </div>
    <div id="js-properties-panel"></div>
  </div>


</template>

<style scoped>
#root {
  height: 500px;
  width: 1000px;
}

#root > div {
  float: left;

}

#bpmnEditorContainer {
  width: 80%;
  height: 500px;
}

#js-properties-panel {
  width: 20%;
  height: 1000px;
}
</style>
